<template>
	<el-dialog v-model="props.isShow" width="28%" @close="handleClose" class="transaction-spot-dialog-dark">
		<template #title>
			<p class="text-18px font-bold">调整保证金</p>
		</template>
		<template #default>
			<div class="w-full">
				<div class="mt-10px w-full">
					<div class="flex items-center justify-between text-12px text-#86909C">
						<p>总额(USDT)</p>
						<p>最大可增加14951.54 USDT</p>
					</div>
					<div class="mt-10px flex items-center w-full text-16px h-60px bg-#272727 box-border border-1px border-#3A3A3A border-solid rounded-8px pr-20px pl-20px">
						<p class="w-10% text-#ffffff border-r-1px border-solid border-#86909C">添加</p>
						<div class="w-80%">
							<el-input style="font-size: 16px;"/>
						</div>
						<p class="text-#114CEE w-10% box-border text-right">最大</p>
					</div>
					<div class="flex items-center justify-between text-12px text-#86909C mt-30px">
						<p>当前仓位保证金</p>
						<p class="text-#ffffff">49.36 USDT</p>
					</div>
					<div class="flex items-center justify-between text-12px text-#86909C mt-10px">
						<p>最大可增加</p>
						<p class="text-#ffffff">99141.30 USDT</p>
					</div>
					<div class="flex items-center justify-between text-12px text-#86909C mt-10px">
						<p>调整后参考强平价</p>
						<p class="text-#ffffff">98734.50 USDT</p>
					</div>
				</div>
				<div class="mt-40px">
					<el-button color="#114CEE" style="width: 100%;height:50px;color:#fff;font-size:18px;">确认</el-button>
				</div>
			</div>
		</template>

	</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
interface IProps {
	isShow: boolean;
}

const props = defineProps<IProps>();
const emit = defineEmits(['close'])

const handleClose = () => {
	emit('close', false);
}
</script>
<style scoped lang="scss">
::v-deep .el-input__wrapper{
	background-color:#272727;
	border: none;
	box-shadow: none;
}
</style>
<style lang="scss">
.transaction-spot-dialog-dark {
	background: #2B2B2B;
}
</style>
